<template>
  <div id="login_username">
    <el-form :rules="rules" :model="form">
      <el-form-item label="用户账号" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="记住我" name="type"></el-checkbox>
      </el-checkbox-group>
      <el-form-item>
        <el-button class="el_btn" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
export default defineComponent({
  setup() {
    const form = reactive({
      name: '',
      password: '',
      type: false
    });
    //编写好规则
    const rules = {
      name: [
        {
          required: true,
          message: '需要输入账号',
          trigger: 'blur'
        }
      ],
      password: [
        {
          required: true,
          message: '需要输入密码',
          trigger: 'blur'
        }
      ]
    };

    //定义登录的方法
    const loginAction = () => {
      console.log('开始登录');
    };
    return {
      form,
      rules,
      loginAction
    };
  }
});
</script>

<style scoped>
.el_btn {
  display: block;
  margin: 10px auto;
  width: 80%;
}
</style>
